<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Drag and Drop - Autosave</title>

    <style>
        .group:before, .group:after {content: " "; display: table;} .group:after {clear: both;} .group {*zoom: 1;}

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	padding: 0;
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
}
header {
	width: 100%;
	padding: 15px 0;
	box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.4);
	background: #1c1c1c;
	background: -moz-linear-gradient(top,  #1c1c1c 0%, #000000 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1c1c1c), color-stop(100%,#000000));
	background: -webkit-linear-gradient(top,  #1c1c1c 0%,#000000 100%);
	background: -o-linear-gradient(top,  #1c1c1c 0%,#000000 100%);
	background: -ms-linear-gradient(top,  #1c1c1c 0%,#000000 100%);
	background: linear-gradient(to bottom,  #1c1c1c 0%,#000000 100%);
}
header h1 {
	width: 800px;
	color: #fff;
	margin: 15px auto;
}
.wrapper {
	width: 800px;
	margin: 30px auto 0;
}
.project-list {
	width: 500px;
	float: left;
}
.add-project {
	width: 300px;
	height: 280px;
	padding: 15px;
	float: left;
	box-shadow: inset 0 0 5px 1px rgba(0,0,0,0.4);
}
.add-project h2 {
	margin-top: 0;
}
ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
li {
	width: 440px;
	height: 50px;
	line-height: 50px;
	border: 1px solid #ccc;
	margin-bottom: 3px;
	padding-left: 10px;
}
input {
	width: 250px;
	padding: 5px 7px;
	border: 1px solid #ccc;
}
button {
	color: #fff;
	background: #1c1c1c;
	background: -moz-linear-gradient(top,  #1c1c1c 0%, #000000 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1c1c1c), color-stop(100%,#000000));
	background: -webkit-linear-gradient(top,  #1c1c1c 0%,#000000 100%);
	background: -o-linear-gradient(top,  #1c1c1c 0%,#000000 100%);
	background: -ms-linear-gradient(top,  #1c1c1c 0%,#000000 100%);
	background: linear-gradient(to bottom,  #1c1c1c 0%,#000000 100%);
	border: 0;
	padding: 5px 10px;
	cursor: pointer;
	margin: 0;
}
button:active {
	margin: 1px 0 0 1px;
}
.over {
	border: 1px dashed #000;
}
.delete {
	width: 440px;
	height: 30px;
	border: 1px solid #ccc;
	line-height: 30px;
	padding-left: 10px;
	margin-top:40px;
}

    </style>
</head>

<body>
<header>
	<h1>Drag and Drop - Autosave</h1>
</header>
<div class="wrapper">
	<div class="group">
		<div class="project-list">
			<h2>Current Projects:</h2>
			<ul class="projects">
                {%  for rec in recs_toolbox %}
				<li><a href="/app/{{ rec.app }}" data-sigg="{{ rec.app }}" data-title="{{ rec.title }}">{{ rec.title }}</a></li>
                {%  end  %}
			</ul>
			<div class="delete">Delete</div>
		</div>
		<div class="add-project">
			<h2>Add a Project:</h2>
			<form>
				<p>

                    <label for="project">Project Name: </label>


                    <select name="project">
                        {%   for rec in  recs_collect %}
						<option value="{{  rec.app.uid }}">{{  rec.app.title  }}</option>
                        {%  end  %}
					</select>

                </p>
				<p>
					<label for="owner">名称</label>
					<input type="text" name="label_name">
				</p>

				<button class="add">Add</button>
			</form>
		</div>
	</div>
</div>
<script >

    (function() {

	var items = document.querySelectorAll('.projects li');
	var el = null;
	var del = document.querySelector('.delete');
	var add = document.querySelector('.add');
	var ul = document.querySelector('ul');
	var form = document.querySelector('form');

	function addListeners() {
		[].forEach.call(items, function(item) {
			item.setAttribute('draggable', 'true');
			item.addEventListener('dragstart', dragStart, false);
			item.addEventListener('dragenter', dragEnter, false);
			item.addEventListener('dragover', dragOver, false);
			item.addEventListener('dragleave', dragLeave, false);
			item.addEventListener('drop', dragDrop, false);
			item.addEventListener('dragend', dragEnd, false);
		});
	}

	del.addEventListener('dragover', delOver, false);
	del.addEventListener('dragenter', delEnter, false);
	del.addEventListener('dragleave', delLeave, false);
	del.addEventListener('drop', deleteItem, false);

	add.addEventListener('click', addItem, false);

	function dragStart(e) {
		this.style.opacity = '0.4';
		el = this;
		e.dataTransfer.effectAllowed = 'move';
		e.dataTransfer.setData('text/html', this.innerHTML);
	}

	function dragOver(e) {
		if (e.preventDefault) {
			e.preventDefault();
		}
		e.dataTransfer.dropEffect = 'move';
		return false;
	}

	function dragEnter(e) {
		this.classList.add('over');
	}

	function dragLeave(e) {
		this.classList.remove('over');
	}

	function dragDrop(e) {
		if (e.stopPropagation) {
			e.stopPropagation();
		}
		if (el != this) {
			el.innerHTML = this.innerHTML;
			this.innerHTML = e.dataTransfer.getData('text/html');
			listChange();
		}
		return false;
	}

	function delOver(e) {
		if (e.preventDefault) {
			e.preventDefault();
		}
		e.dataTransfer.dropEffect = 'move';
		return false;
	}

	function delEnter(e) {
		this.style.borderColor = 'red';
	}

	function delLeave(e) {
		this.style.borderColor = '#ccc';
	}

	function deleteItem(e) {
		if (e.stopPropagation) {
			e.stopPropagation();
		}
		deleteProject(el.innerHTML);
		el.parentNode.removeChild(el);
		this.style.borderColor = '#ccc';
		return false;
	}

	function dragEnd(e) {
		this.style.opacity = '1';
		[].forEach.call(items, function(item) {
			item.classList.remove('over');
		});
	}

	function addItem(e) {
		e.preventDefault();
		var newItem = document.createElement('li');
		var title = form.elements['label_name'].value;

		if (title === '') {
			return false;
		}

        var sig = form.elements['project'].value;


		var newContent = "<a href='/app/" + sig + "' data-sigg='" + sig + "' data-title='" + title +  "'>" + title + '</a>';
		newItem.innerHTML = newContent;

		ul.appendChild(newItem);
		items = document.querySelectorAll('.projects li');
		addListeners();
		listChange();
	}

	function listChange() {
		var tempItems = document.querySelectorAll('.projects li');
        // alert(tempItems);
		[].forEach.call(tempItems, function(item, i) {

			var order = i + 1;
			// var it =  encodeURI(item.innerHTML) + '/' + order;

			var it =  (item.getElementsByTagName('a')[0]).dataset.sigg + '/'
                    + (item.getElementsByTagName('a')[0]).dataset.title + '/'
                    + order;
			saveList(it);
		});
	}

	function saveList(item) {
		var request = new XMLHttpRequest();
		request.open('GET', '/toolbox/save/' + item);
		request.send();
	}

	function deleteProject(item) {
		var request = new XMLHttpRequest();
		request.open('GET', '/toolbox/delete/' + item);
		request.send();
	}

	addListeners();

})();
</script>
</body>
</html>
